Why Did You Render

FCがやたら再レンダリングされるときに何が原因でそれが起こっているのかを特定する

options

include, exclude

除外するものなどの指定

正規表現でコンポーネント名を指定

trackAllPureComponents

特定の物を追跡したい場合はfalse

理想はtrueにした状態でlogが無になること

trackHooks

hooksの変更を追跡

trackExtraHooks

custom hooksの追跡をする

よくあるのはuseSelector

logOnDifferentValues

falseだと「値が同じなのに再描画されるもの」のみを表示

これってobjectの同じさも含む？

trueでhooks版と同じ挙動になる

値が異なるために再描画された場合のprops、stateを全て表示する

値が異なるものも含む

stateが更新されるとObjectが同値でも再描画される

trueのときは、

正常な再描画も全て通知する

しかし、objectが同値だが参照が異なる場合もこちらでのみ通知するので注意

reduerの設計が良いことが前提になっている

つまり、reducerの設計に自信を持てない場合はこちらで検査する必要がある

falseのときは、

正常でない再描画のみを通知する

objectが同値だが参照が異なる場合は通知されない

これはあり得ない前提として扱われているので。

logOwnerReasons

親コンポーネントが再描画された原因も合わせて表示

親の再描画が原因なので。

「Renderd by Hoge」のHogeが原因になっている親のやつ

hotReloadBufferMs

再描画の原因がホットリロードによるものっぽかったらそのログは表示しない

msで指定

onlyLogs

ログをグループ化するかどうか

collapseGroups

ログを折りたたむかどうか

titleColor, jdiffNameColor, diffPathColor

ログを見やすくカラーリング

notifier

custom notifier

関数で指定

使い方忘れた

1コンポーネントに対して調査するときのお手軽サンプルをメモっておきたい

例

code:ts

if (process.env.NODE_ENV === 'development') {

// whyDidYouRender's settings

const whyDidYouRender = require('@welldone-software/why-did-you-render');

const ReactRedux = require('react-redux');

whyDidYouRender(React, {

trackAllPureComponents: true,

// logOnDifferentValues: true,

logOwnerReasons: true,

hotReloadBufferMs: 500,

});

}

trackAllPureComponentsをtrueにして、特定の物をfalseにする

code:ts

const P: React.FC = () => <Text>hoge<Text/>

P.whyDidYouRender = false // こうする

別の開発元のhooks版もある

こっちのほうが出たのは先だった気がする。知らんけど

類似